import React from 'react';
import { useState } from 'react'
import { useModel } from 'umi'
import styles from './login.less'
import { Button, Input } from 'antd'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'
import 'antd/dist/antd.css'
const Login: React.FC = (props: any) => {
    let [mobile, setmobile] = useState('15323807318')
    let [password, setpassword] = useState('123456')
    let { isLogin, doLogin } = useModel('user', model => ({ isLogin: model.isLogin, doLogin: model.doLogin }));
    async function loginClick() {
        if (!/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(17[013-8])|(18[0,5-9]))\d{8}$/.test(mobile)) {
            alert('请输入正确的手机号');
            return;
        }
        if (!password) {
            alert('请输入正确的密码');
            return;
        }
        let result = await doLogin({ mobile, password });
        if (result) {
            props.history.push('/index/home')
            // console.log(props.history);
        }

    }
    return (
        <div className={styles.login}>
            <div className={styles.con}>
                <img src={require('@/public/logo.png')} alt=""/>
                <Input
                    placeholder="请输入手机号"
                    allowClear size="large"
                    value={mobile}
                    onChange={(e) => setmobile(e.target.value)} />
                <Input.Password
                    placeholder="请输入密码"
                    allowClear
                    size="large"
                    value={password}
                    onChange={(e) => setpassword(e.target.value)}
                    iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
                <Button type="primary" shape='round' size='large' onClick={loginClick}>登录</Button>
            </div>

        </div>
    );
}

export default Login;